Dr. Woohoo!'s profile

Explaining the Generative Design Process

I must be in the nesting phase of my life because looking around my place, all I see are blank canvases and design opportunities. The design explored in this post was generated with the home, interior design + textiles in mind.
 
A quick background on my approach: As a generative, computational and interaction designer, I imagine designs for these canvases with a level of detail and design elements that would be impossible to achieve, or would be painstaking to attempt to do so by hand, with off-the-shelf creative applications. To make the designs a reality, I write code that is used in either stand-alone applications, applications running in the browser, and/or as plug-ins or scripts to drive applications like Adobe Illustrator, Photoshop and/or Maya. Each approach has its pros and cons, and an idea for a design dictates what approach(es) make the most sense for it.
 
The following describes the making of process for this design:
Sets of Colors
For the color palettes, in terms of color theory and approach, there are of course multiple paths to choose from to find the 'perfect' set(s) of colors to use. The approach I am taking plays off of having a larger set of existing colors and finding great subsets of colors hidden within. This approach embraces the branch in math called Combinatorics.
 
I choose to use several sets of swatches from PANTONE’s ®VIEW home + interiors 2014 collection, including: Physicality, Sculpted Simplicity and Moda. Each set starts out with a total of 8 colors, but I decided to reduce each set to 3-, 4- and 5-color combinations to be compatible with the different printing and business constraints that need to be considered if this design was to go into production, e.g., if these designs were screen printed, the budget might support 3 distinctive colors. [Note: If you are interested in downloading the ASE files for Adobe's Creative Suite/Cloud, you can find out more information on how to do so here.] I could have created a series of sets by hand, but I risked missing a beautiful collection of colors. This is a classic combinatorics problem with a lot of variations that requires an innovative and elegant solution – use code to automate the process. So I wrote code to systematically generate each possible variation for sets of 3, 4 and 5 colors which then created unique Swatch Groups that could be used within Illustrator or the custom design application I am working on. Following are the numbers associated with this part of the exercise:
 
– 3 Pantone Color Themes of colors (Physicality, Sculpted Simplicity and Moda)
–– Generated Swatch Groups: 549
–– 8 color Swatch Group: 3
–– 5 color Swatch Group: 168
–– 4 color Swatch Group: 210
–– 3 color Swatch Group: 168
––– Unique Swatches: 2,208
Wetland Vegetation Layer
For the actual design elements, inspiration came from the plants normally found in the wetlands in places like Maryland. I wanted to generated a field of plants that was a cross between Typha, Herbaceous, Cyperaceae and/or Cyperus. They needed to have tall and thin stems with leaves. To accomplish this, I wrote a recursive plant algorithm that generated a huge number of plants and sets of plants, from which I picked my favorite variation.
 
– Recursive Plants: 9,980 branches originally generated
Leaves Layer
For the leaves, I wanted to use an abstract design and color each set of leaves with a variation of the 549 color swatch groups generated previously. The objective was to find great color combinations that might otherwise go unnoticed if I manually colored the leaves by hand and created only a few variations. The final renders take place after the stripes logic is defined below.
 
– Generative Leaves: 495 leaves generated
– Unique color sets of leaves: 549
Moore Noise Layer
The objective of this layer was to add a little bit of random noise to the image to add a little bit of unpredictability and excitement to the design. To do so, I wrote some code that broke down the canvas into sets of 3×3 pixels, also known as a Moore’s Neighborhood. For each set of 3×3 pixels, the code randomly turned on/off each pixel until it had stepped through all of the sets. For the final composition, I scaled the group of sets up 6-times.
 
– Total final sets of 3×3 pixels used: 2,500
– Total number of pixels: 22,500
Stripes Layer
For the stripes layer, I wanted to create 2-color stripes that applied all possible color variations from the current swatch group. To do so, I used an algorithm that steps through and applies all variations to the stripes for each of the 549 sets of leaves, e.g., if a set of leaves used 4 specific colors, the stripes would use 2 unique colors from that set of colors so that the total number of colors used in the design would remain at 4.
 
– 3,362 generatively colored variations rendered, which includes color variations of the 2 background stripes.
 
 
A few examples from the final renders:
Explaining the Generative Design Process
Published:

Explaining the Generative Design Process

This project walks you through the Generative Design Process, where code + design live, in order to give you a better sense of how these two worl Read More

Published: